@import '~@/styles/var.scss';
@import '~@/styles/mixin.scss';
@import '~@/styles/playCount.scss';

.discover {
    height: 100%;
    overflow: hidden;

    & .banner {
        position: relative;
        height: 400px;
        &:before {
            content: '';
            position: absolute;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
            top: 0;
            right: 0;
            bottom: 200px;
            left: 0;
            background-color: $theme-bg;
        }
    }

    & .menu {
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid $theme-border;

        &-item {
            color:var(--THEME);
            flex: 0 0 25%;
            padding: 40px 0;
            overflow: hidden;
            text-align: center;
            .iconfont {
                border: 1px solid var(--THEME);
                display: inline-block;
                padding: 20px;
                font-size: 60px;
                border-radius: 80px;
            }
            & p {
                margin-top: 20px;
                text-align: center;
                font-size: $font-size-small-x;
                //color: #2e302f;
            }
        }

        &-icon {
            position: relative;
            width: 40%;
            height: 0;
            margin: 0 30% 20px;
            padding-top: 40%;

            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                @include bg-full;
            }

            &.fm:before {
                @include bg-url('~@/assets/images/discover/icn_fm.png');
            }

            &.fm:active:before {
                @include bg-url('~@/assets/images/discover/icn_fm_prs.png');
            }

            &.daily {
                &:before {
                    @include bg-url('~@/assets/images/discover/icn_daily.png');
                }

                &:after {
                    content: attr(data-date);
                    position: absolute;
                    top: 60%;
                    left: 50%;
                    font-size: $font-size-small;
                    color: $theme-color;
                    transform: translate(-50%, -50%);
                }
            }

            &.daily:active {
                &:before {
                    @include bg-url('~@/assets/images/discover/icn_daily_prs.png');
                }

                &:after {
                    color: $theme-sub-color;
                }
            }

            &.playlist:before {
                @include bg-url('~@/assets/images/discover/icn_playlist.png');
            }

            &.playlist:active:before {
                @include bg-url('~@/assets/images/discover/icn_playlist_prs.png');
            }

            &.rank:before {
                @include bg-url('~@/assets/images/discover/icn_rank.png');
            }

            &.rank:active:before {
                @include bg-url('~@/assets/images/discover/icn_rank_prs.png');
            }
        }
    }

    & .lcrlist {
        width: 100%;

        &-hd {
            height: 160px;
            padding-left: 18px;
            line-height: 160px;
            font-size: 46px;
            color: var(--THEME);
            font-weight: 700;

            span {
                padding-right: 20px;
                //@include bg-url('~@/assets/images/aa7.png');
                @include bg-full($s: 28px, $p: right center);
            }
        }

        &-bd {
            display: flex;
            flex-flow: wrap;
            padding: 0 13px;
        }

        &-item {
            position: relative;
            flex: 0 0 33.333333%;

            .item-img {
                width: calc(100% - 10px);
                height: 0;
                padding-top: calc(100% - 10px);
                margin: 0 5px;
                overflow: hidden;
                @include playCount;

                img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    @include img-full;
                }
            }

            .item-title {
                height: 100px;
                margin: 20px 10px;
                line-height: 50px;
                color: #333;
                font-size: $font-size-small-x;
                word-wrap: break-word;
                word-break: break-all;
                @include no-wrap(2);
            }
        }
    }
}
